<template>
	<view class="content">
		<!-- 下单弹窗 -->
		<view class="maskClass" v-show="showMask" >
		    <view v-show="showMask" style="width:70%; background-color: #fff;padding: 15px;border-radius: 15rpx;margin: 65rpx auto;z-index: 1;">
				<view style="text-align: center;">
					<text style="padding: 35rpx; font-size:35rpx; font-weight:700; text-align:center" >	请选择</text>
				</view>
				<view class="login_from_input">
					<view class="form-left">
						<text>直播标题</text>
					</view>
					<view class="login_from_fun"><input v-model="zhiboInfo.title" placeholder="请输入直播标题"></view>
				</view>
				<view class="login_from_input">
					<view class="form-left">直播开始时间</view>
					<view class="login_from_fun">
						<!-- <picker style="width: 100%;" mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
							<view style="font-size: 25rpx; float:left;">{{ zhiboInfo.startTime || '请选择开始时间' }}</view>
						</picker> -->
						<picker mode="multiSelector" :range="dateTimeArray"  v-model="dateTime" @change="change" @columnchange="columnchange">
							<view>
								<input type="text" disabled="true" v-model="upTower" placeholder="请选择开始时间" placeholder-class="inputPlace" />
							</view>
						</picker>
					</view>
				</view>
				<view class="login_from_input">
					<view class="form-left">直播结束时间</view>
					<view class="login_from_fun">
						<!-- <picker style="width: 100%;" mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange1">
							<view style="font-size: 25rpx; float:left;">{{ zhiboInfo.endTime || '请选择结束时间' }}</view>
						</picker> -->
						<picker mode="multiSelector" :range="dateTimeArray"  v-model="dateTime" @change="changeEnd" @columnchange="columnchange">
							<view>
								<input type="text" disabled="true" v-model="upTower" placeholder="请选择结束时间" placeholder-class="inputPlace" />
							</view>
						</picker>
					</view>
				</view>
				<text style="font-weight: 700;margin: 15rpx;">直播封面</text>
				<view class="card-fan">
					<view class="fan_left" v-show="isShow1">
						<image src="http://113.142.144.25:9301/statics/appimg/upload_pic_new.png" mode="" @tap='touchphoto2'></image>
					</view>
					<view class="fan_right" v-show="!isShow1">
						<image :src="zhiboInfo.image" @tap='touchphoto2'></image>
					</view>
				</view>
				<view class="submit_view">
					<button type="primary" class="submit" @click="submitOrder()">提交</button>
					<button type="warn" class="canncle" @click="closePopup()">取消</button>
				</view>
		    </view>
		</view>
		<!-- 我的直播列表 -->
		<view class="zhibo_list">
			<view class="zhibo_item" v-for="(item,index) in liveList" :key="index">
				<view style="width: 100%;">
					<view style="width: 30%; float:left">
						<image style="height:150rpx;width: 260rpx; margin-top: 20rpx; margin-right: 20rpx; border-radius: 5rpx; float: left;" :src="item.studioImg"></image>
					</view>
					<view style="width: 70%; float:left">
						<view>
							<rich-text class="policy_title" :nodes="item.title"></rich-text> 
						</view>
						<view>
							<text class="publicTime">开始时间：{{item.startTime}}</text>
							<text class="publicTime">结束时间：{{item.endTime}}</text>
						</view>
						<view style="float: left; margin-right: 25rpx; margin-top: 15rpx;" @click="beginLive(liveList[index])">
							<button type="primary" size="mini">开始直播</button>
						</view>
					</view>
					<view class="devideline"></view>
				</view>
			</view>
		</view>
		<image class="add" src="@/static/images/dial_zhoibo.png" @click="reportZhibo()"></image>
	</view>
</template>

<script>
	
	const dateTimePicker = require('@/utils/dateTimePicker.js')
	
	import env from '@/utils/env';
	import * as mylive from '@/api/zhibo.js'
	import * as userEnter from '@/api/personCenter/index.js'
	
	function getDate(type) {
		const date = new Date();
	 
		let year = date.getFullYear();
		let month = date.getMonth() + 1;
		let day = date.getDate();
		let hour = date.getHours();
		let minutes = date.getMinutes();
		let seconds = date.getSeconds();
	 
		if (type === 'start') {
			year = year - 10;
		} else if (type === 'end') {
			year = year + 10;
		}
		month = month > 9 ? month : '0' + month;
		day = day > 9 ? day : '0' + day;
	 
		return `${year}-${month}-${day} ${hour}:${minutes}:${seconds}`;
	}
	
	export default {	
	    data() {	
	        return {	
				showMask:false,
				liveList:[],
				zhiboInfo:{
					title:'',
					studioImg:'',
					applyunit:'服务机构11',
					startTime:'2022-11-02 10:00:00',
					endTime:'2022-11-02 12:00:00',
				},
				isShow1:true,
				date: getDate({
					format: true
				}),
				query:{
					pageNum:'1',
					pageSize:'10',
					applyunit:'服务机构11',
				},
				startDate: getDate('start'),
				endDate: getDate('end'),
				enterInfo:{
					
				},
				dateTimeArray: null,
				dateTime: null,
				startYear: 2000,
				endYear: 2050,
	        };	
	    },	
	    onReady() {	
			//传入开始展示年份startYear 结束展示年份endYear
			   //自定义开始显示时间
		   let arr = getDate().replace(/-/g,'/')
		   let obj = dateTimePicker.dateTimePicker(this.startYear, this.endYear,arr)
		   this.dateTimeArray = obj.dateTimeArray
		   this.dateTime = obj.dateTime
			this.getEnterInfo()
	    },	
	    methods: {
			getEnterInfo(){
				var myStorage = uni.getStorageSync('userInfo')||[]
				var userId = myStorage.login_user.member.id
				userEnter.getMemberEnterInfo(userId).then((res)=>{
					this.enterInfo = res.data
					this.zhiboInfo.applyunit = this.enterInfo.realName
					this.query.applyunit = this.enterInfo.realName
					this.getLiveList()
				})
			},
	        reportZhibo(){
				this.showMask = true;
			},
			closePopup(){
				this.showMask = false
			},
			getLiveList(){
				mylive.listLive(this.query).then((res)=>{
					this.liveList = res.rows
					console.log(this.liveList[0])
				})
			},
			submitOrder(){
				if(this.zhiboInfo.title == ''){
					uni.showToast({
						icon:'none',
						title:'标题不能为空'
					})
				}else if(this.zhiboInfo.startTime == this.zhiboInfo.endTime){
					uni.showToast({
						icon:'none',
						title:'两个时间不能一致'
					})
				}else{
					mylive.addLive(this.zhiboInfo).then((res)=>{
						this.showMask = false
						this.getLiveList()
					})
				}
			},
			bindDateChange(e) {
				this.zhiboInfo.startTime = e.detail.value;
			},
			bindDateChange1(e) {
				this.zhiboInfo.endTime = e.detail.value;
			},
			touchphoto2() {
				let that = this
				uni.chooseImage({
					count: 1,
					success: (res) => {
						// 2上传文件
						uni.uploadFile({
							url: env.baseUrl+"/file/upload",
							filePath: res.tempFilePaths[0],
							name: "file",
							success: (res2) => {
								var data = JSON.parse(res2.data)
								if (data.code == 200) {
									that.zhiboInfo.image = `${env.imgUrl}` + data.data.url
									that.isShow1 = false
								} else {
									uni.showModal({
										title: "提示信息",
										content: "上传失败！"
									})
									that.isShow1 = true
								}
							}
						})
					}
				})
			},
			beginLive(item){
				var currentTime = new Date();
				var date1 = new Date(item.startTime)
				var date2 = new Date(item.endTime)
				if(currentTime.getTime() > date1.getTime() && currentTime.getTime < date2.getTime()){
					uni.navigateTo({
						url:''
					})
				}else{
					uni.showToast({
						icon:'none',
						title:'请在申请时间段内进行直播！'
					})
				}
			},
			//时间选择器相关
			withData(index,param){
				
				if(index == 1 || index == 2){
					param = param +1
				}
				
			    return param < 10 ? '0' + param : '' + param;
			},
			change(e){
			    let value = []
			    e.detail.value.forEach((val,index) => {
					value.push(this.withData(index,val))
			    })
			    let dateArray = "20" + value[0] + "-" + value[1] + "-" + value[2] + " " + value[3] + ":" + value[4]
			    this.upTower = dateArray
				this.zhiboInfo.startTime = dateArray
			},
			changeEnd(e){
			    let value = []
			    e.detail.value.forEach((val,index) => {
					value.push(this.withData(val))
			    })
			    let dateArray = "20" + value[0] + "-" + value[1] + "-" + value[2] + " " + value[3] + ":" + value[4]
			    this.upTower = dateArray
				this.zhiboInfo.endTime = dateArray
			},
			columnchange(e){
			    let dateArr = this.dateTimeArray
			    let arr = this.dateTime
			    //滑动所在列的数据并对其值进行更新
			    arr[e.detail.column] = e.detail.value
			    //更新展示月份对应的天数（28 or 29 or 30 or 31）
			    dateArr[2] = dateTimePicker.getMonthDay(dateArr[0][arr[0]], dateArr[1][arr[1]])
			    //最后把最新的数值赋值到dateTimeArray
			    this.dateTimeArray = dateArr
			    this.dateTime = arr
				
			},
	    }	
	};
</script>

<style>
	.add{
		position: fixed;
		bottom: 40rpx;
		right: 40rpx;
		height: 100rpx;
		width: 100rpx;
		float: right;
		height: 50rpx;
		width: 50rpx;
	}
	
	.maskClass {
		position:fixed;
		bottom:0;
		top:0;
		left:0;
		right:0;
		background-color:rgba(0, 0, 0, 0.5);
		z-index: 2;
	}
	
	.submit_view {
		height: 90rpx;
	}
		
	.submit_view .submit{
		background-color: #016fb8;
		height: 70rpx;
		width: 40%;
		font-size: 28rpx;
		margin-top: 20rpx;
		float: left;
	}
	.submit_view .canncle{
		background-color: darkgray;
		height: 70rpx;
		width: 40%;
		font-size: 28rpx;
		margin-top: 20rpx;
		float: right;
	}
	
	.login_from_input{
		width: 100%; 
		height:auto; 
		display: flex; 
		flex-direction: row; 
		justify-content: space-between; 
		align-items: center; 
		border-bottom: 1px #eee solid; 
		padding: 20upx 0px; 
		margin: 0px auto; 
		background-color: #fff;
	} 
	
	.login_from_name{
		width: 45%; 
		margin-left: 40rpx;
		font-size: 30rpx;
	}
	.login_from_fun{ 
		width: 65%; 
		display: flex; 
		flex-direction: row; 
		justify-content: flex-end; 
		text-align: right; 
		margin-left: 25rpx;
	}
	
	.login_from_fun input{ 
		width: 100%; 
		text-align: left; 
		font-size: 14px;  
	}
	
	
	.card-fan {
		width: 100%;
		height: 240px;
		display: flex;
		justify-content: space-around;
	}
		
	.fan_left {
		width: 70%;
		height: 100%;
		display: inline-block;
	}
		
	.fan_left image {
		width: 90%;
		height: 70%;
		line-height: 70%;
		margin-top: 30px;
		margin-left: 10px;
	}
		
	.fan_right {
		width: 70%;
		height: 100%;
		display: inline-block;
	}
		
	.fan_right image {
		width: 90%;
		height: 70%;
		line-height: 70%;
		margin-top: 30px;
		margin-left: 10px;
	}
	
	.policy_title {
		display: -webkit-box;
		width: 95%;
		margin-top: 50rpx;
		font-size: 30rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow:ellipsis;
		-webkit-box-orient: vertical; /*排列方式*/ 
		-webkit-line-clamp: 1; /*显示文本行数(这里控制多少行隐藏)*/
	}
	
	.publicTime {
		float:left;
		font-size: 26rpx;
		color: #a1a1a1;
		margin-top: 15rpx;
	}
	
	.devideline {
		float: left;
		height: 0.3rpx;
		width:100%;
		background-color: #eeeeee;
		margin-top: 15rpx;
		margin-bottom: 15rpx;
	}
	
	.zhibo_item{
		width: 95%;
		margin: 0 auto;
		background-color: #e1e1e1;
		border-radius: 15rpx;
	}
		
</style>